<template>
  <el-container @click="eventBus">
    <el-header><Taskbar /></el-header>
    <el-main @click="closeAllPanel"><router-view /></el-main>
    <el-footer v-if="false"></el-footer>
  </el-container>
  <Widget />
  <Notice />
</template>
<script>
import { computed, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import {useRouter} from 'vue-router'

import Taskbar from '@/views/taskbar';
import Widget from '@/components/Widget'
import Notice from '@/components/Notice'

export default {
  components: {
    Taskbar,
    Notice,
    Widget
  },
  setup() {
    const store = useStore();
    const eventBus = (e) => {
      if (!e.target.id) return;
      //store.dispatch('taskbar/changeStartMenuShow', false);
    };

    // 点击桌面空白处关闭小工具
    const closeAllPanel = () =>{
      store.dispatch('taskbar/closeAllPanel',false)
    }

    return {
      eventBus,
      closeAllPanel
    };
  },
};
</script>
<style lang="scss">
.el-container {
  background-image: url('./assets/img/wallpaper/default/img0.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.el-header{
  background-color: rgba(254, 254, 254, 0.8);
  color: var(--el-text-color-primary);
  text-align: center;
  height: 40px !important;
}
.el-footer {
  background-color: rgba(254, 254, 254, 0.8);
  color: var(--el-text-color-primary);
  text-align: center;
  height: 40px !important;
}

.el-main {
  width: 100vw;
  height: calc(100vh - 40px);
  user-select: none;
  overflow: hidden !important;
}
</style>
